/*
 * @Description:
 * @Autor: lcz
 * @Date: 2022-08-24 10:12:30
 * @LastEditors: lcz
 * @LastEditTime: 2022-08-24 14:38:30
 */

import { Cascader } from 'antd' 
import React, { useMemo, useState } from 'react'
import cityJson from '../../json/city.json'

interface Option {
  [key: string]: string | number | Option[]
}

const CascaderCmp: React.FC = () => {
  const [value, setValue] = useState<string[] | number[]>([])
  const fieldNames = useMemo(() => {
    return { label: 'value', value: 'value', children: 'children' }
  }, [])
  const options: Option[] = useMemo(() => {
    if (!!cityJson) {
      return cityJson
    } else {
      return []
    }
  }, [cityJson])
  const onChange = (value: any[]) => {
    setValue(value)
    console.log(value)
  }

  const defaultValue = useMemo(() => {
    return []
  }, [])

  return (
    /**
     * allowClear 是否支持清楚
     * autoFocus 聚焦
     * changeOnSelect 是否点击任意一项都触发 单选生效
     * disabled 是否禁用
     * expandTrigger 展开方式 'click' 'hover'
     * fieldNames 从定义字段名
     * placeholder
     * placement 浮层预设位置 bottomLeft bottomRight topLeft topRight
     * showSearch 选择框中显示搜索
     * multiple 是否支持多选
     */
    <>
      <Cascader
        value={value}
        changeOnSelect={false}
        options={options}
        onChange={onChange}
        placeholder={'Please select'}
        allowClear={true}
        autoFocus={false}
        disabled={false}
        defaultValue={defaultValue}
        fieldNames={fieldNames}
        expandTrigger={'hover'}
        placement={'bottomLeft'}
        showSearch={true}
        multiple={false}
      />
    </>
  )
}
export default CascaderCmp
